<template>
	<view class="" style="width: 95%;margin: auto;margin-top: 20rpx" v-if="itemData.data.product_list.length>0">
		<view v-if="itemData.style.display == 'slide'">
			<view style="width: 98%;">
			    <view style="height: 96rpx;overflow: hidden;border-radius:0 15rpx 0 0;display: flex; ">
			        <view style="display: flex;align-items: center;width: 30%;position: relative">
			            <view>
			                <image src="/static/images/groupearn/left.png" style="width: 300rpx;height: 120rpx;position: absolute;top: 0;left: 0"></image>
			            </view>
			            <view style="position: absolute;left: 0;display: flex;align-items: center;margin-left: 10rpx">
			                <view>
			                    <image src="/static/images/group/fire.png" style="width: 40rpx;" mode="widthFix"></image>
			                </view>
			                <view>
			                    <image src="/static/images/groupearn/word.png" style="width: 180rpx;margin-left: 10rpx" mode="widthFix"></image>
			                </view>
			            </view>
			        </view>
			        <view class="fsc" style="background: linear-gradient(359deg, #359DFE 0%, #88C6FF 84%, #56ADFF 100%);width: 70%;border-radius: 0 15rpx 0 0;padding: 0 20rpx;margin-top: 10rpx">
			            <view style="margin-left: 60rpx">
			                <u-count-down  separator="colon" color="#3CA1FF" separator-color="white" font-size="25" separator-size="25" height="45"   :timestamp="diftime" ></u-count-down>
			            </view>
			            <view @click="gotoList" style="color: rgba(255,255,255,0.47)">
			                更多
			                <image src="/static/images/group/arrow.png" style="width: 25rpx;margin-left: 10rpx;display: inline-block" mode="widthFix"></image>
			            </view>
			        </view>
			    </view>
			</view>
			<view style="background-color: white;border-radius: 0 15rpx 0 15rpx;">
			    <scroll-view scroll-x="true" style="white-space: nowrap">
			        <block v-for="(item, index) in itemData.data.product_list" :key="index">
			            <view style="width: 40%;display: inline-block;margin: 20rpx"   @click="gotoDetail(item.product_id)">
			                <view style="position: relative">
			                    <image :src="item.product_image" style="width: 100%;height: 260rpx;border-radius: 10rpx" mode="aspectFill"></image>
			                    <view class="product-title linedot" style="margin-top: 10rpx" v-if="itemData.style.show.productName === true">{{ item.product_name }}</view>
			                    <view class="product-price" v-if="itemData.style.show.seckillPrice == true">
			                        <text class="red" style="font-size: 32rpx">¥</text>
			                        <text class="red" style="font-size: 32rpx">{{ item.seckill_price }}</text>
			                    </view>
			                </view>
			                <view class="hlbbutton" style="height: 56rpx;width: 240rpx;line-height: 56rpx;color: white;background-color: #3CA1FF">
			                    立即购买
			                </view>
			            </view>
			        </block>
			    </scroll-view>
			</view>
		</view>

        <!-- 大图样式 -->
        <view v-else>
        	<view class="diy-activity-assemble">
        		<view class="assemble-header-left">
        			<view>
        				<image src="/static/images/group/fire.png" style="width: 40rpx;" mode="widthFix"></image>
        			</view>
        			<view>
        				<image src="/static/images/groupearn/word.png" style="width: 180rpx;margin-left: 6rpx" mode="widthFix"></image>
        			</view>
        		</view>
        		<view class="assemble-header-right" @click="gotoList">
        			查看全部
        			<image src="/static/images/group/arrow_right.png" style="width: 24rpx;margin-left: 6rpx;" mode="widthFix"></image>
        		</view>
        	</view>
        	<view class="diy-activity-product-list">
        		<block v-for="(item, index) in itemData.data.product_list" :key="index">
        			<view class="activity-product-item" @click="gotoDetail(item.product_id)">
        				<view class="activity-product-cover">
        					<image :src="item.product_image" style="width: 100%;" mode="widthFix"></image>
        					<view class="hover-tip">
        						<text class="end">距结束</text>
        						<text class="line">|</text>
        						<view class="time">
        							<u-count-down separator-size="22" separator-color="#FFDE07" font-size="26" color="#FFDE07" bg-color="none" :timestamp="diftime"></u-count-down>
        						</view>
        					</view>
        				</view>
        				<view class="activity-product-info">
        					<view class="assemble-title">
        						<view v-if="itemData.style.show.productName === true" class="title linedot">{{ item.product_name }}</view>
        						<view v-if="itemData.style.show.linePrice == true" class="line-price">原价: <text class="text-d-line">¥{{ item.product_price }}</text></view>
        					</view>
        					<view class="assemble-price">
        						<view class="price-left">
        							<view class="price-info">
        								<view class="group-num">
        									<view class="cost"><text class="unit">¥</text>{{ item.product_price }}元</view>
        								</view>
        							</view>
        							<view class="progress">
        								<u-line-progress active-color="#3CA1FF" inactive-color="#F5ECE6" height="12" :show-percent="false" :percent="20"></u-line-progress>
        							</view>
        						</view>
        						<view class="assemble-button">立即购买</view>
        					</view>
        				</view>
        			</view>
        		</block>
        	</view>
        </view>
	</view>
</template>

<script>
	import Countdown from '@/components/countdown/countdown.vue';
	export default {
		components: {
			Countdown
		},
		data() {
			return {
				/*倒计时配置*/
				countdownConfig: {
					/*开始时间*/
					startstamp: 0,
					/*结束时间*/
					endstamp: 0,
					/*标题*/
					title: ' ',

				},
                diftime :0
			};
		},
		props: ['itemData'],
		created() {
			console.log(66666666)
			console.log(this.itemData)
			this.countdownConfig.endstamp = this.itemData.data.end_time;
			this.countdownConfig.startstamp = this.itemData.data.start_time;
			this.diftime  =this.countdownConfig.endstamp-Date.parse(new Date())/1000;;

		},
		methods: {
			scroll(e) {},

			/*跳转列表*/
			gotoList() {
				let url = '/pages/plus/groupearn/list/list';
				this.gotoPage(url);
			},

			/*跳转产品详情*/
			gotoDetail(e) {
				let url = 'pages/product/detail/detail?product_id=' + e;
				this.gotoPage(url);
			}
		}
	};
</script>

<style lang="scss">
	.diy-seckillProduct {
		margin: 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 0 20rpx 20rpx;
		background: #ffffff;
	}

	.sharpproduct-head {
		height: 100rpx;
		color: #000000;
	}

	.sharpproduct-head .name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.sharpproduct-head .datetime::v-deep text {
		font-size: 24rpx;
		color: #F6220C;
	}

	.sharpproduct-head .datetime::v-deep .box {
		padding: 4rpx 10rpx;
		font-size: 22rpx;
		background: #FFEBEB;
		color: #F6220C;
	}

	.sharpproduct-head .icon-jiantou {
		margin-left: 8rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.diy-seckillProduct .product-list .product-item {
		overflow: hidden;
		flex-shrink: 0;
	}

	.diy-seckillProduct .product-list .product-cover image {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
		border-radius: 12rpx;
	}

	.diy-seckillProduct .product-list .product-cover .price {
		font-size: 20rpx;
		color: #F01A1A;
		line-height: 26rpx;
		padding-top: 16rpx;
		padding-bottom: 8rpx;
	}

	.diy-seckillProduct .product-list .product-title {
		margin-top: 26rpx;
		height: 30rpx;
		line-height: 30rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
	}

	.diy-seckillProduct .column__3 .product-list .product-title {
		font-size: 28rpx;
	}

	.diy-seckillProduct .column__3 .product-list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.diy-seckillProduct .column__3 .product-item {
		width: 240rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #ffffff;
	}

	.diy-seckillProduct .column__3 .product-cover {
		width: 240rpx;
		height: 240rpx;
		margin: 0 auto;

	}

	.diy-assembleproduct .product-list {
		flex-wrap: nowrap;
	}
	
	/* 大图样式 */
	.diy-activity-assemble {
		height: 40rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.assemble-header-left {
			display: flex;
			align-items: center;
		}
		
		.assemble-header-right {
			color: #6E6E6E;
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
		}
	}
	
	.diy-activity-product-list {
		.activity-product-item {
			background-color: white;
			border-radius: 20rpx;
			height: 508rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			
			.activity-product-cover {
				height: 320rpx;
				overflow: hidden;
				position: relative;
				
				.hover-tip {
					position: absolute;
					top: 0;
					left: 0;
					background-color: rgba(0, 0, 0, 0.5);
					padding: 10rpx 24rpx;
					border-radius: 20rpx 0 20rpx 0;
					
					.end {
						color: #ffffff;
						font-size: 26rpx;
						line-height: 36rpx;
					}
					
					.line {
						color: #ffffff;
						font-size: 26rpx;
						line-height: 36rpx;
						margin: 0 8rpx;
					}
					
					.time {
						line-height: 36rpx;
						display: inline-block;
					}
				}
			}
			
			.activity-product-info {
				height: 188rpx;
				padding: 20rpx;
				
				.assemble-title {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.title {
						font-family: PingFang SC;
						font-size: 32rpx;
						color: #1B1B1B;
						line-height: 36rpx;
						font-weight: 500;
						margin-right: 40rpx;
					}
					
					.line-price {
						flex-shrink: 0;
						font-family: PingFang SC;
						font-size: 24rpx;
						color: #C4C4C4;
						line-height: 36rpx;
					}
				}
				
				.assemble-price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					
					.price-left {
						margin-right: 20rpx;
						
						.price-info {
							display: flex;
							align-items: center;
							
							.symbol-price {
								.symbol {
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									line-height: 36rpx;
									color: #F63E36;
								}
								
								.price {
									font-size: 40rpx;
									font-family: SF Pro Display;
									font-weight: bold;
									line-height: 36rpx;
									color: #F63E36;
									margin-left: 4rpx;
								}
							}
							
							.group-num {
								height: 36rpx;
								border-radius: 8rpx;
								font-size: 40rpx;
								font-family: PingFang SC;
								font-weight: 400;
								box-sizing: content-box;
								display: flex;
								align-items: center;
								
								.cost {
									font-size: 40rpx;
									height: 36rpx;
									line-height: 36rpx;
									color: #F63E36;
									font-weight: bold;
									padding-bottom: 10rpx;
									.unit {
										font-size: 28rpx;
										height: 36rpx;
										line-height: 36rpx;
										color: #F63E36;
									}
								}
							}
						}
						
						.progress {
							width: 400rpx;
							line-height: 1;
						}
					}
					
					.assemble-button {
						width: 200rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						color: #ffffff;
						background: linear-gradient(90deg, #88C6FF 0%, #56ADFF 100%);
						border-radius: 40rpx;
					}
				}
			}
		}
	}
</style>
